<template>
    <div class="wrap" bubble="true">
      <text>home component</text>
      <scroller class="scroller">
        <div class="btn">
            <text class="btnText" @click="throwFetch" >触发请求</text>
        </div>
        <div class="btn">
            <text class="btnText" @click="picker" >picker</text>
        </div>
        <div class="btn">
            <text class="btnText" @click="nav" >跳转</text>
        </div>
        <div><text>````````````````````````````````````````````</text></div>
        <div class="btn">
            <text class="btnText" @click="throwError">触发错误</text>
        </div>
        <div><text>````````````````````````````````````````````</text></div>
        <div class="btn">
            <text class="btnText" @click="toOtherPage">切换页面</text>
        </div>
        <div><text>````````````````````````````````````````````</text></div>
        <div class="btn">
            <text class="btnText" @click="toOrigin">跳原生</text>
        </div>
        <div><text>````````````````````````````````````````````</text></div>
        <div class="btn">
            <text class="btnText" @click="toSpa">跳spa</text>
        </div>
      </scroller>
    </div>
</template>

<script>

var navigator = weex.requireModule('navigator')
var modal = weex.requireModule('modal')
var picker = weex.requireModule('picker')
// var stream = weex.requireModule('stream')

export default{
  name: 'Home',
  data () {
    return {
      url: 'http://192.168.1.109:8010/web/bar'
    }
  },
  methods: {
    nav () {
      navigator.push({
        url: 'https://blog.csdn.net/weixin_43964148/article/details/124089667',
        animated: 'true'
      }, event => {
        console.log('callback: ', event)
      })
    },
    toOrigin () {
      navigator.push({url: this.getJumpBaseUrl('OtherPage'), animated: 'true'})
    },
    toSpa () {
      // navigator.push({url:"/about",animated:'true'})
    },
    throwError () {
      // eslint-disable-next-line no-undef
      console.log(jiarui1111)
    },
    toOtherPage () {
      // modal.toast({
      //     message:this.getJumpBaseUrl("OtherPage"),
      //     duration:3
      // })
      let path = this.getJumpBaseUrl('OtherPage')
      navigator.push({url: path, animated: 'true'})
    },

    getJumpBaseUrl (toUrl) {
      var bundleUrl = weex.config.bundleUrl
      // eslint-disable-next-line no-new-wrappers
      bundleUrl = new String(bundleUrl)
      console.log(333, weex)
      var nativeBase
      var native
      if (WXEnvironment.platform === 'android') {
        nativeBase = 'file://assets/dist/'
        native = nativeBase + toUrl + '.js'
      } else if (WXEnvironment.platform === 'iOS') {
        nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
        native = nativeBase + toUrl + '.js'
      } else {
        var host = 'localhost:8081'
        // eslint-disable-next-line no-useless-escape
        var matches = /\/\/([^\/]+?)\//.exec(bundleUrl)
        if (matches && matches.length >= 2) {
          host = matches[1]
        }
        // 此处需注意一下,tabbar 用的直接是jsbundle 的路径,但是navigator是直接跳转到新页面上的.
        if (typeof window === 'object') {
          nativeBase = 'http://' + host + '/'
        } else {
          nativeBase = 'http://' + host + '/'
        }

        native = nativeBase + toUrl + '.js'
      }
      return native
    },
    throwFetch () {
      modal.toast({
        message: '发送请求',
        duration: 3
      })
      //   var data = stream.fetch({url: 'http://www.baidu.com'})
      // modal.toast("请求成功")
      modal.toast({
        message: '请求成功',
        duration: 3
      })
    },
    picker () {
      console.log(picker)
      let options = {
        index: 1,
        item: ['a', 'b', 'c']

      }
      function callback (ret) {
        console.log(ret)
      }
      picker.pick(options, callback)
    }
  }
}
</script>
<style scoped>
    .wrap{
        border: 1px solid green;
    }
    .btn{
        margin-top: 10px;
        display: flex;
        height: 100px;
        background-color: gray;
        width: 300px;
        justify-content: center;
        align-items: center;
    }
    .btnText{
        color: red;
    }
    .input{
        height: 60px;
        width: 400px;
        border: 1px solid black;
        display: inline-block;
    }
</style>
